<template>
  <div>
    <el-row>
      <el-button @click="openCreate()">添加</el-button>
      <el-button @click="openSearch()">帐号检索</el-button>
      <div v-for="item in this.userList">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{item.id}}</span>
              </div>
              <div class="text item">
                用户名：{{item.username}}
              </div>
              <div class="text item">
                密码：{{item.userpaw}}
              </div>
              <div class="text item">
                电话：{{item.phone}}
              </div>
              <div class="text item">
                身份证号：{{item.identity}}
              </div>
              <div class="text item">
                <el-button @click="openUpdate(item)">修改</el-button>
                <el-button @click="openDelete(item)">删除</el-button>
              </div>
            </el-card>
          </div>
        </el-col>
      </div>


    </el-row>

    <!--对话框开始-->
    <el-dialog title="添加用户" :visible.sync="dialogCreateVisible">
      <div>
        <label>用户名称<input ref="nameCreate"></label><br>
        <label>密码<input ref="pwdCreate"></label><br>
        <label>手机<input ref="phoneCreate"></label><br>
        <label>角色
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item"
              :value="item">
            </el-option>
          </el-select>
        </label>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCreateVisible = false">返回</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button @click="save" type="primary">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改用户" :visible.sync="dialogUpdateVisible">
      <div>
        <label>用户名称<input ref="nameUpdate"></label><br>
        <label>密码<input ref="pwdUpdate"></label><br>
        <label>手机<input ref="phoneUpdate"></label><br>
        <label>角色
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item"
              :value="item">
            </el-option>
          </el-select>
        </label>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">返回</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button @click="update" type="primary">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="删除用户" :visible.sync="dialogDeleteVisible">
      <div><p>确定要删除用户？</p></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteVisible = false">返回</el-button>
        <el-button @click="deleteUser" type="primary">删除</el-button>
      </div>
    </el-dialog>

    <el-dialog title="帐号检索" :visible.sync="dialogSearchVisible">
      <div>
        <p>请输入搜索条件</p>
        <input ref="idSearch" size="mini" placeholder="帐号"/><br>
        <input ref="usernameSearch" size="mini" placeholder="昵称"/><br>
        <input ref="phoneSearch" size="mini" placeholder="电话"/><br>
        <input ref="identitySearch" size="mini" placeholder="身份证号"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSearchVisible = false">返回</el-button>
        <el-button @click="searchUser" type="primary">检索</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Common from '@/components/common/Common'
    export default {
        name: "AdminManagement",
        data() {
            return {
                options: ['角色1', '角色2'],
                userList: [],
                userItem: {},
                dialogCreateVisible: false,
                dialogUpdateVisible: false,
                dialogDeleteVisible: false,
                dialogSearchVisible: false
            }
                ;
        },
        mounted: function () {
            this.loadAllUser();//需要触发的函数
        },
        methods: {
            loadAllUser() {
                this.axios.get(Common.API+'admin/getUsers')
                    .then(response => {
                        this.userList = response.data.data;
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            openCreate() {
                this.dialogCreateVisible = true;
            },
            openUpdate(item) {
                this.userItem = item;
                this.dialogUpdateVisible = true;
                this.$refs.nameUpdate.value = item.username;
                this.$refs.pwdUpdate.value = this.userItem.userpaw;
                this.$refs.phoneUpdate.value = this.userItem.phone;
            },
            openDelete(item) {
                this.dialogDeleteVisible = true;
                this.userItem = item;
            },
            reset() {
                this.$refs.nameCreate.value = '';
                this.$refs.pwdCreate.value = '';
                this.$refs.phoneCreate.value = '';
                this.$refs.nameUpdate.value = '';
                this.$refs.pwdUpdate.value = '';
                this.$refs.phoneUpdate.value = '';
            },
            checkCreate() {
                if ('' === this.$refs.nameCreate.value
                    || '' === this.$refs.pwdCreate.value
                    | '' === this.$refs.phoneCreate.value) {
                    alert('内容不能为空');
                    return false
                } else {
                    return true
                }
            },
            checkUpdate() {
                if ('' === this.$refs.nameUpdate.value
                    || '' === this.$refs.pwdUpdate.value
                    | '' === this.$refs.phoneUpdate.value) {
                    alert('内容不能为空');
                    return false
                } else {
                    return true
                }
            },
            save() {
                if (this.checkCreate()) {
                    this.axios.post(Common.API+'admin/addUser', {
                        username: this.$refs.nameCreate.value,
                        userpaw: this.$refs.pwdCreate.value,
                        phone: this.$refs.phoneCreate.value,
                    })
                        .then(response => {
                            if ('SUCCESS' === response.data) {
                                this.dialogCreateVisible = false;
                                this.loadAllUser();
                            }
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                }
            },
            deleteUser() {
                this.axios.post(Common.API+'admin/deleteUser', {id: this.userItem.id})
                    .then(response => {
                        if ('SUCCESS' === response.data) {
                            this.dialogDeleteVisible = false;
                            this.loadAllUser();
                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            update() {
                if (this.checkUpdate()) {
                    this.axios.post(Common.API+'admin/updateUser', {
                        id: this.userItem.id,
                        username: this.$refs.nameUpdate.value,
                        userpaw: this.$refs.pwdUpdate.value,
                        phone: this.$refs.phoneUpdate.value,
                    })
                        .then(response => {
                            if ('SUCCESS' === response.data) {
                                this.dialogUpdateVisible = false;
                                this.loadAllUser();
                            }
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                }
            },
            openSearch() {
                this.dialogSearchVisible = true;
            },
            searchUser() {
                this.axios.post(Common.API+'admin/getUsersOrderBy', {
                    id: this.$refs.idSearch.value,
                    username: this.$refs.usernameSearch.value,
                    phone: this.$refs.phoneSearch.value,
                    identity: this.$refs.identitySearch.value
                })
                    .then(response => {
                        this.userList = response.data.data;
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }
        }
    }
</script>

<style scoped>

</style>
